<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>24_定位-特殊情况2-定位元素的宽度-relative</title>
        <style>
            #outer {
                position: relative;
                width: 800px;
                height: 200px;
                background-color: #ccc;
            }

            #inner {
                position: absolute;
                /* 子绝父不相  那么相对的是初始包含块  所以100%不可以 */
                /* width: 100%; */
                /* 子绝父相 相对的父元素的宽 这没有问题 但是小盒子还有边框  那么就会超过父盒子 */
                /* width: 100%; */

                /* 当自己有宽度和高度的时候 那么就听自己的 */
                /* width: 80px;
                height: 80px; */

                left: 0;
                right: 0;

                top: 0;
                bottom: 0;


                background-color: green;
                /* border: 5px solid red; */
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
                炸雷
            </div>
        </div>
    </body>
</html>